<template>
    <div class="chat-container">
      <h1>WebSocket Chat</h1>
      <div class="messages">
        <div v-for="(message, index) in messages" :key="index" class="message">
          {{ message }}
        </div>
      </div>
      <div class="input-group">
        <input
          type="text"
          v-model="message"
          placeholder="Enter message"
          @keyup.enter="sendMessage"
        />
        <button @click="sendMessage">Send</button>
      </div>
      <div class="online-users">
        <h3>Online Users</h3>
        <ul>
          <li v-for="user in onlineUsers" :key="user">{{ user }}</li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  import "@/utils/InterceptorUtils";
//   import "@/utils/WebSocket";
  export default {
    name: "ChatComponent",
    data() {
      return {
        socket: null,
        message: "",
        messages: [],
        onlineUsers: []
      };
    },
    methods: {
      connectWebSocket() {
        this.socket = new WebSocket("ws://localhost:8888/chat");
        this.socket.onopen = () => {
          console.log("WebSocket connected");
        };
  
        this.socket.onmessage = (event) => {
          const data = JSON.parse(event.data);
          if (Array.isArray(data)) {
            // 更新在线用户列表
            this.onlineUsers = data;
          } else {
            // 添加新消息
            this.messages.push(data);
          }
        };  
        this.socket.onerror = (error) => {
          console.error("WebSocket error:", error);
        };
      },
      sendMessage() {
        if (this.message.trim() === "") return;
  
        const message = {
          toName: "receiver", // 假设发送给一个固定用户，可以根据需要修改
          message: this.message
        };
  
        this.socket.send(JSON.stringify(message));
        this.message = "";
      }
    },
    mounted() {
      // this.connectWebSocket();
    },
    beforeDestroy() {
      if (this.socket) {
        this.socket.close();
      }
    }
  };
  </script>
  
  <style scoped>
  .chat-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  
  .messages {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
  }
  
  .message {
    margin-bottom: 5px;
  }
  
  .input-group {
    display: flex;
    margin-bottom: 20px;
  }
  
  .input-group input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .input-group button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .input-group button:hover {
    background-color: #0056b3;
  }
  
  .online-users {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
  }
  
  .online-users h3 {
    margin-top: 0;
  }
  
  .online-users ul {
    list-style-type: none;
    padding: 0;
  }
  
  .online-users li {
    margin: 5px 0;
  }
  </style>